<template>
  <div>
    <el-button type="primary" @click="dialogAddFormVisible = true">添加部门</el-button>
    <el-table :data="departInfoList" style="width: 100%">
      <el-table-column prop="departId" label="ID"/>
      <el-table-column prop="departName" label="部门名称"/>
      <el-table-column prop="branchInfo.branchName" label="机构"/>
      <el-table-column prop="userInfo.userName" label="负责人"/>
      <el-table-column prop="connectTelNo" label="联系电话"/>
      <el-table-column prop="connectMobileTelNo" label="移动电话"/>
      <el-table-column prop="faxes" label="传真"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button plain @click="openUpdDialog(scope.row)" type="primary" circle>
            改
          </el-button>
          <el-button type="danger" @click="delDepartInfo(scope.row.departId)" circle>删</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--    修改框 -->
  <el-dialog v-model="dialogUpdFormVisible" title="修改窗口" width="500">
    <upd-depart-info :branchList="branchList" :userInfoList="userInfoList"
                     :updDepartVO="updDepartInfoVO" @toUpdDepartInfo="updDepart"
                     @to-cancel="dialogUpdFormVisible = $event"></upd-depart-info>
  </el-dialog>

  <!--    添加框 -->
  <el-dialog v-model="dialogAddFormVisible" title="添加窗口" width="500">
    <add-depart-info :branchList="branchList" :userInfoList="userInfoList"
                     @to-add-depart-info="addDepart" @to-cancel="dialogAddFormVisible = $event"></add-depart-info>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, onMounted, toRaw} from "vue";
import UpdDepartInfo from "@/components/personnelManagement/UpdDepartInfo.vue";
import AddDepartInfo from "@/components/personnelManagement/AddDepartInfo.vue";
import api from "@/axios.js";
import {ElMessage} from "element-plus";
import {DepartInfo, BranchInfo, UserInfo} from "@/ts/personnel/DepartInfo";


onMounted(() => {
  selDepartInfo();
  selBranch();
  selUserInfo();
})

let departInfoList = ref([]);


function selDepartInfo() {
  api({url: "/departInfo", method: "get"}).then(resp => {
    departInfoList.value = resp.data;
  });
}

function delDepartInfo(departId: Number) {
  api({url: "/departInfo/" + departId, method: "delete"}).then(resp => {
    if (resp.data.code == 1)
      selDepartInfo();
    ElMessage(resp.data.message);
  });
}

// 机构列表
let branchList = ref<BranchInfo[]>([]);

function selBranch() {
  api({url: "/selBranchInfo"}).then(resp => {
    branchList.value = resp.data;
  })
}

// 员工列表
let userInfoList = ref<UserInfo[]>([]);

function selUserInfo() {
  api({url: "/selUserInfoAll"}).then(resp => {
    userInfoList.value = resp.data;
  })
}

// 修改
let dialogUpdFormVisible = ref<Boolean>(false);
// 添加
let dialogAddFormVisible = ref<Boolean>(false);
// 被修改的对象
const updDepartInfoVO = ref<DepartInfo>({});

function openUpdDialog(row: DepartInfo) {
  updDepartInfoVO.value = row;
  dialogUpdFormVisible.value = true;
}

function updDepart(departInfo: DepartInfo) {
  const depart = toRaw<DepartInfo>(departInfo);
  depart.userInfo = null;
  depart.branchInfo = null;

  api({url: "/departInfo", method: "put", params: depart}).then(resp => {
    if (resp.data.code == 1)
      selDepartInfo();
    ElMessage(resp.data.message);
  });
  dialogUpdFormVisible.value = false;
}

function addDepart(departInfo: DepartInfo) {
  api({url: "/departInfo", method: "post", params: toRaw(departInfo)}).then(resp => {
    if (resp.data.code == 1)
      selDepartInfo();
    ElMessage(resp.data.message);
  });
  dialogAddFormVisible.value = false;
}

</script>

<style scoped>

</style>